<template>
  <view class="container">
    <!-- 顶部导航 -->
    <uni-nav-bar title="报告查询" left-icon="back" @clickLeft="back"></uni-nav-bar>

    <!-- 搜索和筛选区 -->
    <view class="search-filter-bar">
      <uni-search-bar 
        placeholder="搜索报告名称、检查类型..." 
        v-model="searchKeyword"
        @input="handleSearch"
        clearable
        class="search-bar"
      ></uni-search-bar>
      
      <uni-select 
        v-model="selectedCategory" 
        :range="reportCategories" 
        range-key="name"
        @change="handleCategoryChange"
        class="category-select"
      ></uni-select>
    </view>

    <!-- 报告表格 -->
    <view class="section report-table">
      <view class="table-header">
        <view class="table-col col-name">报告名称</view>
        <view class="table-col col-category">报告类型</view>
        <view class="table-col col-hospital">检查医院</view>
        <view class="table-col col-date">检查日期</view>
        <view class="table-col col-status">状态</view>
      </view>

      <!-- 有报告时显示 -->
      <view v-if="filteredReports.length > 0">
        <view 
          v-for="(report, index) in filteredReports" 
          :key="index"
          class="table-row"
          @click="viewReportDetail(report.id)"
        >
          <view class="table-col col-name">{{ report.name }}</view>
          <view class="table-col col-category">{{ getCategoryName(report.categoryId) }}</view>
          <view class="table-col col-hospital">{{ report.hospital }}</view>
          <view class="table-col col-date">{{ report.checkDate }}</view>
          <view class="table-col col-status">
            <view class="status-tag" :class="report.status === 'normal' ? 'normal' : 'abnormal'">
              {{ report.status === 'normal' ? '正常' : '异常' }}
            </view>
          </view>
        </view>
      </view>

      <!-- 无报告时显示 -->
      <view v-else class="no-report">
        <text class="empty-text">暂无相关报告</text>
        <text class="empty-desc">请检查筛选条件或稍后再来查询</text>
      </view>
      
      <!-- 统计信息 -->
      <view class="report-stats">
        <text>共 {{ filteredReports.length }} 份报告 | 正常 {{ normalCount }} 份 | 异常 {{ abnormalCount }} 份</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 搜索关键词
      searchKeyword: '',
      
      // 报告分类
      reportCategories: [
        { id: 0, name: "全部" },
        { id: 1, name: "影像检查" },
        { id: 2, name: "化验报告" },
        { id: 3, name: "体检报告" },
        { id: 4, name: "病理报告" }
      ],
      
      // 选中的分类
      selectedCategory: 0,
      
      // 报告数据
      reports: [
        {
          id: 1,
          name: "胸部CT平扫",
          categoryId: 1,
          hospital: "市第一人民医院",
          checkDate: "2023-10-15",
          reportDate: "2023-10-16",
          status: "normal"
        },
        {
          id: 2,
          name: "血常规检查",
          categoryId: 2,
          hospital: "市第一人民医院",
          checkDate: "2023-10-15",
          reportDate: "2023-10-15",
          status: "abnormal"
        },
        {
          id: 3,
          name: "年度体检报告",
          categoryId: 3,
          hospital: "健康体检中心",
          checkDate: "2023-09-05",
          reportDate: "2023-09-07",
          status: "normal"
        },
        {
          id: 4,
          name: "心电图检查",
          categoryId: 1,
          hospital: "市第二人民医院",
          checkDate: "2023-08-22",
          reportDate: "2023-08-22",
          status: "normal"
        },
        {
          id: 5,
          name: "肝功能化验",
          categoryId: 2,
          hospital: "市第一人民医院",
          checkDate: "2023-08-10",
          reportDate: "2023-08-11",
          status: "normal"
        },
        {
          id: 6,
          name: "病理活检报告",
          categoryId: 4,
          hospital: "省肿瘤医院",
          checkDate: "2023-07-18",
          reportDate: "2023-07-22",
          status: "normal"
        }
      ]
    };
  },
  
  computed: {
    // 过滤后的报告列表
    filteredReports() {
      return this.reports.filter(report => {
        // 分类过滤
        const categoryMatch = this.selectedCategory === 0 || report.categoryId === this.selectedCategory;
        
        // 搜索关键词过滤
        const keywordMatch = 
          !this.searchKeyword || 
          report.name.includes(this.searchKeyword) ||
          report.hospital.includes(this.searchKeyword) ||
          this.getCategoryName(report.categoryId).includes(this.searchKeyword);
          
        return categoryMatch && keywordMatch;
      }).sort((a, b) => {
        // 按检查日期倒序排列（最新的在前）
        return new Date(b.checkDate) - new Date(a.checkDate);
      });
    },
    
    // 正常报告数量
    normalCount() {
      return this.filteredReports.filter(report => report.status === 'normal').length;
    },
    
    // 异常报告数量
    abnormalCount() {
      return this.filteredReports.filter(report => report.status === 'abnormal').length;
    }
  },
  
  methods: {
    // 获取分类名称
    getCategoryName(id) {
      const category = this.reportCategories.find(cat => cat.id === id);
      return category ? category.name : '';
    },
    
    // 处理分类变更
    handleCategoryChange(e) {
      this.selectedCategory = e.detail.value;
    },
    
    // 搜索处理
    handleSearch() {
      // 搜索逻辑由computed自动处理
    },
    
    // 查看报告详情
    viewReportDetail(reportId) {
      uni.navigateTo({
        url: `/pages/report/detail?id=${reportId}`
      });
    },
    
    // 返回上一页
    back() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
}

// 搜索和筛选栏
.search-filter-bar {
  display: flex;
  gap: 15rpx;
  margin-bottom: 20rpx;
  
  .search-bar {
    flex: 1;
  }
  
  .category-select {
    width: 200rpx;
  }
}

// 报告表格样式
.report-table {
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
  
  // 表格头部
  .table-header {
    display: flex;
    background-color: #f5f7fa;
    border-bottom: 1rpx solid #eee;
    font-weight: bold;
  }
  
  // 表格行
  .table-row {
    display: flex;
    border-bottom: 1rpx solid #eee;
    transition: background-color 0.2s;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:active {
      background-color: #f5f7fa;
    }
  }
  
  // 表格列通用样式
  .table-col {
    padding: 25rpx 15rpx;
    font-size: 26rpx;
    display: flex;
    align-items: center;
    word-break: break-all;
  }
  
  // 各列宽度设置
  .col-name {
    flex: 2;
  }
  
  .col-category {
    flex: 1.2;
  }
  
  .col-hospital {
    flex: 1.8;
  }
  
  .col-date {
    flex: 1.2;
  }
  
  .col-status {
    flex: 1;
    justify-content: center;
  }
  
  // 状态标签
  .status-tag {
    padding: 5rpx 15rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    
    &.normal {
      background-color: #e5f5ea;
      color: #00b42a;
    }
    
    &.abnormal {
      background-color: #fee;
      color: #f53f3f;
    }
  }
  
  // 无报告状态
  .no-report {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 150rpx 0;
    
    .empty-text {
      font-size: 30rpx;
      color: #666;
      margin-bottom: 15rpx;
    }
    
    .empty-desc {
      font-size: 24rpx;
      color: #999;
      text-align: center;
      max-width: 400rpx;
    }
  }
  
  // 统计信息
  .report-stats {
    padding: 20rpx 15rpx;
    font-size: 24rpx;
    color: #666;
    border-top: 1rpx solid #eee;
    background-color: #f9f9f9;
  }
}
</style>
    